<template>
  <a-modal
    :title="$t('dialog.profile_apply.title')"
    v-model:open="modalVisible"
    :footer="null"
    width="41.6667vw"
  >
    <div class="div-list" v-if="detailData">
      <div class="div-row" v-for="(item, index) in detailData">
        <div class="div-col"></div>
        <div class="div-col"></div>
      </div>
    </div>

    <div class="detail-list" v-if="detailData">
      <div class="detail-item title">
        <div class="content">
          {{ detailData.course_title }}
        </div>
      </div>
      <div class="detail-item">
        <div class="label">{{ $t("table.profile_apply.col_5") }}</div>
        <div class="content">
          {{ detailData.last_name + ' '+ detailData.first_name }}
        </div>
      </div>
      <div class="detail-item">
        <div class="label">{{ $t("table.profile_apply.col_6") }}</div>
        <div class="content">
          <span class="payed" v-if="detailData.status_title === '已支付'">{{
            $t("tag.payed")
          }}</span>
          <span class="pre-pay" v-else>{{ $t("tag.pre_pay") }}</span>
        </div>
      </div>
      <div class="detail-item">
        <div class="label">{{ $t("table.profile_apply.col_2") }}</div>
        <div class="content">{{ detailData.order_number }}</div>
      </div>
      <div class="detail-item">
        <div class="label">{{ $t("table.profile_apply.col_4") }}</div>
        <div class="content">{{ detailData.create_time }}</div>
      </div>
      <div
        class="detail-item course-outline"
        v-if="
          detailData.CourseSubmitList && detailData.CourseSubmitList.length > 0
        "
      >
        <div class="label">{{ $t("label.course_outline") }}</div>
        <div class="content table">
          <div style="border: 1px solid #e6edf2; border-bottom: none">
            <div v-for="(item, index) in courseSubmitList" :key="index">
              <div
                class=" cell"
                v-for="(inner, index2) in item"
                :key="index2"
              >
                {{ inner.list_title }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { postCourseSubmitView } from "../../../../../api/aviation";
type Props = {
  id: number | string;
};
const props = defineProps<Props>();

const modalVisible = ref(false);
const detailData = ref();
const courseSubmitList = ref();
const showCourseSubmitItemView = async (id: number) => {
  if (isMobile()) {
    goto("/mobile_detail/apply", { id });
    return;
  }
  if (detailData.value?.id == id) {
    return;
  }
  let res = await postCourseSubmitView(id);
  if (res.code == 200) {
    detailData.value = res.data;
    handleData();
  }
};

const handleData = () => {
  if (!detailData.value.CourseSubmitList) return;
  let arr: any[] = detailData.value.CourseSubmitList; // 假设这是原始数据
  let new_arr: any[] = [];

  for (let i = 0; i < arr.length; i += 2) {
    let inner_arr:any[] = []
    if(arr[i]) {
      inner_arr.push(arr[i])
    }
    if(arr[i+1]) {
      inner_arr.push(arr[i+1])
    }
    new_arr.push(inner_arr);
  }
  courseSubmitList.value = new_arr;
};

const showDialog = () => {
  modalVisible.value = true;
  showCourseSubmitItemView(props.id as number);
};

defineExpose({
  showDialog,
});
</script>
<style scoped lang="less">
.detail-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  .detail-item {
    margin-top: 30px;
    .label {
      margin-bottom: 15px;
      position: relative;
      padding-left: 10px;
      font-size: 20px;
      color: #172026;
      font-weight: 500;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 4px;
        height: 14px;
        background: #172026;
      }
    }
    .content {
      font-size: 15px;
      color: #36434d;
      span {
        width: 69px;
        height: 32px;
        border-radius: 8px 8px 8px 8px;
        font-size: 16px;
        padding: 5px 11px;
        &.pre-pay {
          color: #ff4060;
          background: rgba(255, 64, 96, 0.1);
        }
        &.payed {
          color: #36d96c;
          background: rgba(54, 217, 108, 0.1);
        }
      }
    }
  }
  .course-outline,
  .title {
    grid-column: 1 / span 2;
  }
  .title {
    margin-top: 0;
    .content {
      font-size: 25px;
      font-weight: 600;
    }
  }
  .table {
    text-align: left;
    & > div {
      & > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        &:nth-child(odd) {
          background-color: #f5f9fa; /* 第一行和第二行背景色 */
        }

        &:nth-child(even) {
          background-color: #fff; /* 第三行和第四行背景色 */
        }
      }
    }
  }
}
</style>
